﻿@page "/home"
@inherits AuthRedirect
@inject NavigationManager NavigationManager
@inject IJSRuntime JSRuntime

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<div class="home-container">
    <!-- 顶部导航栏 -->
    <header class="app-header">
        <div class="logo">
            <img src="/logo.png" alt="Logo" class="logo-image">
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <!-- 功能卡片区域 -->
        <div class="feature-section">
            <div class="section-header">
                <i class="bi bi-list" style="font-size: 18px; color: #4caf50;"></i>
                <span class="section-title">核心功能</span>
            </div>

            @foreach (var item in mainFeatures)
            {
                <div class="feature-card" @onclick="() => NavigateTo(item.Path)">
                    <div class="card-content">
                        <i class="@item.Icon" style="font-size: 24px; color: @item.Color; margin-right: 15px;"></i>
                        <div class="card-text">
                            <h3>@item.Title</h3>
                            <p>@item.Description</p>
                        </div>
                        <i class="bi bi-arrow-right" style="font-size: 18px; color: #ccc; margin-left: 10px;"></i>
                    </div>
                </div>
            }
        </div>

        <!-- 快捷入口区域 -->
        <div class="quick-access-section">
            <div class="section-header">
                <i class="bi bi-star" style="font-size: 18px; color: #4caf50;"></i>
                <span class="section-title">快捷入口 (未来可能增加的功能)</span>
            </div>

            <div class="row">
                @foreach (var item in quickAccess)
                {
                    <div class="col-6 col-sm-3 quick-access-col">
                        <div class="quick-access-item" @onclick="() => NavigateTo(item.Path)">
                            <div class="quick-access-content">
                                <i class="@item.Icon" style="font-size: 28px; color: @item.Color;"></i>
                                <span>@item.Title</span>
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </main>

    <!-- 底部导航栏 -->
    <footer class="bottom-nav">
        <div class="nav-menu">
            <div class="nav-item @(activeIndex == "/home" ? "active" : "")" @onclick="@(() => HandleMenuSelect("/home"))">
                <i class="bi bi-house-door" style="font-size: 24px;"></i>
                <span>首页</span>
            </div>
            <div class="nav-item @(activeIndex == "/detection" ? "active" : "")" @onclick="@(() => HandleMenuSelect("/detection"))">
                <i class="bi bi-camera" style="font-size: 24px;"></i>
                <span>识别</span>
            </div>
            <div class="nav-item @(activeIndex == "/gallery" ? "active" : "")" @onclick="@(() => HandleMenuSelect("/gallery"))">
                <i class="bi bi-journal-bookmark" style="font-size: 24px;"></i>
                <span>图鉴</span>
            </div>
        </div>
    </footer>
</div>

@code {
    private string activeIndex = "/home";

    private List<FeatureItem> mainFeatures = new List<FeatureItem>
    {
        new FeatureItem
        {
            Icon = "bi bi-camera",
            Title = "植物状态监测",
            Description = "监测植物生长状态和健康状况",
            Path = "/detection",
            Color = "#4caf50"
        },
        new FeatureItem
        {
            Icon = "bi bi-journal-bookmark",
            Title = "作物图鉴",
            Description = "查看各类作物详细信息",
            Path = "/gallery",
            Color = "#8bc34a"
        },
        new FeatureItem
        {
            Icon = "bi bi-clock",
            Title = "历史记录",
            Description = "查看您的识别记录",
            Path = "/history",
            Color = "#cddc39"
        }
    };

    private List<QuickAccessItem> quickAccess = new List<QuickAccessItem>
    {
        new QuickAccessItem
        {
            Icon = "bi bi-chat-dots",
            Title = "专家建议",
            Path = "/advice",
            Color = "#4caf50"
        },
        new QuickAccessItem
        {
            Icon = "bi bi-sun",
            Title = "天气信息",
            Path = "/weather",
            Color = "#2196f3"
        },
        new QuickAccessItem
        {
            Icon = "bi bi-cart",
            Title = "市场价格",
            Path = "/market",
            Color = "#ff9800"
        },
        new QuickAccessItem
        {
            Icon = "bi bi-people",
            Title = "农友社区",
            Path = "/community",
            Color = "#9c27b0"
        }
    };


    private void NavigateTo(string path)
    {
        if (path == "/advice" || path == "/weather" || path == "/market" || path == "/community"){
            JSRuntime.InvokeVoidAsync("alert", "功能未开放");
            return;
        }
        NavigationManager.NavigateTo(path,forceLoad:true);
    }

    private void HandleMenuSelect(string index)
    {
        activeIndex = index;
        NavigationManager.NavigateTo(index, forceLoad: true);
    }

    protected override void OnInitialized()
    {
        activeIndex = "/home";
    }

    public class FeatureItem
    {
        public string Icon { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public string Path { get; set; }
        public string Color { get; set; }
    }

    public class QuickAccessItem
    {
        public string Icon { get; set; }
        public string Title { get; set; }
        public string Path { get; set; }
        public string Color { get; set; }
    }
}

<style>
    .home-container {
        height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: #f8faf8;
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        position: relative;
        overflow: hidden;
    }

    /* 顶部导航栏 */
    .app-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        height: 60px;
        background-color: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .logo-image {
        height: 40px;
        border-radius: 40px;
    }

    /* 主要内容区域 */
    .main-content {
        flex: 1;
        padding: 50px 20px 50px;
        padding-bottom: 80px;
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
    }

    /* 分区标题 */
    .section-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 15px;
    }

    .section-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }

    /* 功能卡片 */
    .feature-section {
        margin-bottom: 20px;
        border-radius: 12px;
        background-color: white;
        padding: 15px;
    }

    .feature-card {
        margin-bottom: 12px;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s;
        background-color: white;
        padding: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

        .feature-card:last-child {
            margin-bottom: 0;
        }

        .feature-card:hover {
            transform: translateY(-3px);
        }

    .card-content {
        display: flex;
        align-items: center;
        padding: 10px 0;
    }

    .card-text {
        flex: 1;
    }

        .card-text h3 {
            font-size: 16px;
            color: #333;
            margin: 0 0 5px 0;
        }

        .card-text p {
            font-size: 12px;
            color: #888;
            margin: 0;
        }

    /* 快捷入口区域 */
    .quick-access-section {
        border-radius: 12px;
        margin-bottom: 20px;
        background-color: white;
        padding: 15px;
    }

    .quick-access-col {
        margin-bottom: 12px;
    }

    .quick-access-item {
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s;
        height: 100%;
        margin: 0;
        padding: 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

        .quick-access-item:hover {
            transform: translateY(-3px);
        }

    .quick-access-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

        .quick-access-content span {
            font-size: 14px;
            color: #555;
        }

    /* 底部导航栏 */
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background-color: white;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        z-index: 100;
    }

    .nav-menu {
        display: flex;
        height: 100%;
    }

    .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #757575;
        cursor: pointer;
        transition: all 0.3s;
    }

        .nav-item i {
            font-size: 22px;
            margin-bottom: 4px;
        }

        .nav-item span {
            font-size: 12px;
        }

        .nav-item.active {
            color: #4caf50;
        }

        .nav-item:hover {
            color: #2e7d32;
        }
</style>